<template>
  <el-dialog
    :model-value="dialogVisible"
    title="产品明细列表"
    width="60%"
    draggable
  >
    <vab-table
      tableHeight="360"
      :listData="data.tableData"
      :columnsList="data.tabCloum"
      :loading="data.loading"
      @handleCurrent="handleCurrent"
      @handleSize="handleSize"
    ></vab-table>
    <template #footer>
      <div class="dialog-footer flex_center">
        <el-button type="primary" @click="handleDialog('Confirm')">
          确认
        </el-button>
        <el-button @click="handleDialog('Cancel')">返回</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
defineProps({
  dialogVisible: {
    type: Boolean,
    default: true,
  },
})

const data: any = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  total: 20,
  tabButtonList: [
    {
      name: '编辑',
      icon: 'editor',
      id: '4',
    },
    {
      name: '详情',
      icon: 'details',
      id: '5',
    },
    {
      name: '删除',
      icon: 'delete',
      id: '6',
    },
  ], //传table里面有那些操作
  tableData: [
    {
      s1: 's1',
      s2: 's2',
      s3: 's3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3',
      s4: 's4',
      s5: 's5',
      s6: 's6',
    },
  ],
  tableSelect: false, //是否有多选操作列
  tableRadio: false, //是否有单选操作列
  tabCloum: [
    { label: '设备编号', prop: 's1' },
    { align: 'right', label: '设备名称', prop: 's2' },
    { align: 'right', label: '区域名称', prop: 's3', ellipsisyi: 'ellipsis' }, //ellipsis预留移入显示
    {
      label: '街道名称',
      prop: 's4',
      align: 'center',
      render: (row: any) => {
        if (row.s4 == '1') {
          return "<div style='color: red;'>街道1</div>"
        } else {
          return "<div style='color: yellowgreen;'>街道2</div>"
        }
      },
    },
    { align: 'right', label: '站点名称', prop: 's5' },
    { align: 'right', label: '挂载设备数量', prop: 's6' },
    {
      label: '操作',
      align: 'center',
      fixed: 'right',
      render: (row: any) => {
        return `<span class='btn_static btn_add'>增加</span>`
      },
    },
  ], // 操作列
})

const emit = defineEmits(['handleDialog'])

const handleDialog = (value: string) => {
  if (value == 'Cancel' || value == 'Confirm') {
    emit('handleDialog', false)
  }
}
const handleCurrent = (value: any) => {
  data.pageNum = value
}
const handleSize = (value: any) => { }

const handleForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped></style>
